<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/custom.form.css}">
    <style type="text/css">
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 110px;
        }

        .border-1px-op2 {
            border: 1px solid rgba(0, 0, 0, .2);
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="panel panel-default operation_rotation" style="margin-bottom: -20px;" hidden>
            <div class="panel-heading title"></div>
            <div class="layui-card-body">
                <form class="layui-form " action="" lay-filter="deptInfo" style="width: 700px;margin-top: 10px">
                    <input name="id" lay-reqtext="轮播图id不能为空" hidden/>

                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="请输入轮播图名称" autocomplete="off"
                                   lay-verify="required"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">广告地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" placeholder="请输入配置广告地址" autocomplete="off"
                                   lay-verify="required"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label ">排序号</div>
                        <div class="layui-input-block">
                            <input type="number" name="sort" placeholder="请输入排序号" autocomplete="off"
                                   lay-verify="required"
                                   class="layui-input"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label ">轮播图片</div>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="rotationBtn">上传图片</button>
                            <input type="hidden" lay-verify="required" lay-reqtext="请上传轮播图" id="img_url" name="fileUrl"/>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="rotationImage" onerror="this.style.display='none'"/>
                                <p id="rotationText"></p>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label ">备注</div>
                        <div class="layui-input-block">
                            <input type="text" name="description" placeholder="请输入备注信息" autocomplete="off"
                                   class="layui-input"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                            <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-card-body">
            <div class="rotation_table_div">
                <table class="layui-hide" id="rotation_table" lay-filter="rotation_table"></table>
                <div class="layui-table-page">
                    <div id="laypage"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="add"
                shiro:hasPermission="sys:rotation:add">
            <i class="layui-icon">&#xe608;</i> 新增轮播图
        </button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="del"
                shiro:hasPermission="sys:rotation:delete">
            <i class="layui-icon">&#xe640;</i> 批量删除
        </button>
    </div>
</script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="update"
       shiro:hasPermission="sys:rotation:update">
        编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
       shiro:hasPermission="sys:rotation:delete">
        删除
    </a>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/core.util.js}"></script>
<script>
    layui.use(['table', 'laypage', 'jquery', 'layer', 'form', 'upload'], function () {
        var table = layui.table;
        var laypage = layui.laypage
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var searchParam = {
            pageNum: 1,
            pageSize: 10
        };
        var basePath = CoreUtil.getContextPath();
        /*动态获取数据*/
        CoreUtil.sendAjax(basePath + "/api/rotations", JSON.stringify(searchParam), function (res) {
            //初始化分页器
            laypageTable(res.data.totalRows, searchParam.pageNum);
            //初始化渲染数据
            if (res.data.list != null) {
                loadTable(res.data.list);
            }
        }, "POST", false, function (res) {
            //无权限访问提示
            layer.msg("抱歉！您暂无获取轮播数据列表的权限");
            var noAuthorityData = [];
            loadTable(noAuthorityData);
        });

        //渲染分页插件
        var laypageTable = function (count, currentPage) {
            laypage.render({
                elem: 'laypage',
                count: count,
                limit: searchParam.pageSize,
                layout: ['prev', 'page', 'next', 'skip', 'limit', 'refresh', 'count'],
                curr: location.hash.replace('#!currentPage=', ''), //获取起始页
                hash: 'currentPage', //自定义hash值
                //连续出现的页码个数
                groups: 3,
                //自定义“上一页”的内容，支持传入普通文本和HTML
                prev: '<i class="layui-icon">&#xe603;</i>',
                //自定义“下一页”的内容，同上
                next: '<i class="layui-icon">&#xe602;</i>',
                jump: function (obj, first) {
                    if (!first) {
                        searchParam.pageNum = obj.curr;
                        searchParam.pageSize = obj.limit;
                        CoreUtil.sendAjax(basePath + "/api/rotations", JSON.stringify(searchParam), function (res) {
                            if (res.data.list != null) {
                                loadTable(res.data.list);
                                laypageTable(res.data.totalRows, searchParam.pageNum);
                            }
                        }, "POST", false, function (res) {
                            //无权限访提示
                            layer.msg("抱歉！您暂无获取轮播图数据列表的权限");
                            var noAuthorityData = [];
                            loadTable(noAuthorityData);
                        });
                    }
                }
            });
        };

        //渲染table
        var loadTable = function (data) {
            //展示已知数据
            table.render({
                elem: '#rotation_table',
                cols: [
                    [
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'id', title: 'ID', width: 200, sort: true},
                        {field: 'url', title: '轮播图广告地址', width: 200},
                        {field: 'name', title: '轮播图名称', width: 200},
                        {field: 'fileUrl', title: '图片地址', width: 200},
                        {field: 'sort', title: '轮播图排序位置', width: 130},
                        {
                            field: 'createTime', title: '创建时间', minWidth: 120, templet: function
                                (item) {
                                return CoreUtil.formattime(item.createTime);
                            }
                        }
                        ,
                        {title: '操作', width: 200, toolbar: '#tool'}
                    ]
                ],
                data: data,
                //不启用隔行背景
                even: false,
                limit: data.length,
                limits: [10, 20, 30, 40, 50],
                toolbar: '#toolbar'
            });
        };

        //监听事件
        table.on('toolbar(rotation_table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            switch (obj.event) {
                case 'add':
                    $(".rotation_table_div").hide();
                    $(".operation_rotation").show();
                    $(".title").html("新增轮播图");
                    var rotationId = $(".operation_rotation input[name=id]");
                    rotationId.val("");
                    rotationId.removeAttr("lay-verify");
                    var rotationName = $(".operation_rotation input[name=name]");
                    rotationName.val("");
                    rotationName.attr("lay-verify", "required");
                    var rotationUrl = $(".operation_rotation input[name=url]");
                    rotationUrl.val("");
                    rotationUrl.attr("lay-verify", "required");
                    $(".operation_rotation input[name=fileUrl]").val("");
                    var rotationSort = $(".operation_rotation input[name=sort]");
                    rotationSort.val("");
                    rotationSort.attr("lay-verify", "required");
                    $(".operation_rotation input[name=description]").val("");
                    // 清空图片
                    var $rotationImage = $('#rotationImage');
                    $rotationImage.attr('src', basePath + "/images/transparent.png");
                    $rotationImage.addClass("border-1px-op2");
                    $("#rotationText").val("");
                    break;
                case 'del':
                    //获取选中的数据
                    var data = checkStatus.data;
                    if (data.length === 0) {
                        layer.msg("请选择要批量删除的轮播图");
                    } else {
                        var rotations = [];
                        //获取选中文件的id集合
                        $(data).each(function (index, item) {
                            var obj = {
                                id: item.id,
                                fileUrl: item.fileUrl
                            };
                            rotations.push(obj);
                        });
                        tipDialog(rotations);
                    }
                    break;
            }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            if (data.field.id == null || data.field.id === "") {
                //新增
                CoreUtil.sendAjax(basePath + "/api/rotation", JSON.stringify(data.field), function (res) {
                    $(".operation_rotation").hide();
                    $(".rotation_table_div").show();
                    $(".layui-laypage-btn").click();
                }, "POST", false, function (res) {
                    //无权限访提示
                    layer.msg("抱歉！您暂无新增轮播图的权限");
                });
            } else {
                //修改
                CoreUtil.sendAjax(basePath + "/api/rotation", JSON.stringify(data.field), function (res) {
                    $(".operation_rotation").hide();
                    $(".rotation_table_div").show();
                    $(".layui-laypage-btn").click();
                }, "PUT", false, function (res) {
                    //无权限访提示
                    layer.msg("抱歉！您暂无编辑轮播图的权限");
                });
            }
            return false;
        });

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#rotationBtn',
            url: basePath + '/api/file', //改成您自己的上传接口
            size: 102400, //限制文件大小，单位 KB
            headers: {
                "authorization": CoreUtil.getData("access_token"),
                "file-type_": 2
            },
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    removeBorder(result, function (result) {
                        $('#rotationImage').attr('src', result); //图片链接（base64）
                    });
                });
            },
            done: function (res) {
                //上传成功
                if (res.code === 0) {
                    $("#img_url").val(res.data);
                } else {
                    //如果上传失败
                    $('#rotationImage').addClass("border-1px-op2");
                    layer.msg(res.msg);
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#rotationText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        function removeBorder(result, callback) {
            $('#rotationImage').removeClass("border-1px-op2");
            callback(result);
        }

        //返回列表
        $("#btn_cancel").click(function () {
            //显示表格
            $(".rotation_table_div").show();
            //隐藏编辑窗口
            $(".operation_rotation").hide();
            //可以防止在表单事件操作后自动刷新
            return false;
        });

        //监听工具条
        table.on('tool(rotation_table)', function (obj) {
            //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'update':
                    $(".rotation_table_div").hide();
                    $(".operation_rotation").show();
                    $(".title").html("编辑轮播图");
                    var rotationId = $(".operation_rotation input[name=id]");
                    rotationId.val(data.id);
                    rotationId.attr("lay-verify", "required");
                    var rotationName = $(".operation_rotation input[name=name]");
                    rotationName.removeAttr("lay-verify");
                    rotationName.val(data.name);
                    $(".operation_rotation input[name=url]").val(data.url);
                    $(".operation_rotation input[name=fileUrl]").val(data.fileUrl);
                    $(".operation_rotation input[name=sort]").val(data.sort);
                    $(".operation_rotation input[name=description]").val(data.description);
                    var $rotationImage = $('#rotationImage');
                    $rotationImage.removeClass("border-1px-op2");
                    $rotationImage.attr('src', data.fileUrl);
                    $("#rotationText").val("");
                    break;
                case 'del':
                    var rotations = [];
                    var rotation = {
                        id: data.id,
                        fileUrl: data.fileUrl
                    };
                    rotations.push(rotation);
                    tipDialog(rotations);
                    break;
            }
        });

        //删除前确认对话框
        var tipDialog = function (rotations) {
            layer.open({
                title: '确认',
                content: '<div style="text-align: center">确定要删除么?</div>',
                yes: function (index, layerObj) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendAjax(basePath + "/api/rotation", JSON.stringify(rotations), function (res) {
                        layer.msg(res.msg);
                        $(".layui-laypage-btn").click();
                    }, "DELETE", false, function (res) {
                        //无权限删除操作日志提示
                        layer.msg("抱歉！您暂无删除轮播图文件的权限");
                    });
                }
            });
        }

    });
</script>
</html>